<script setup>

import { useRouter } from "vue-router";
import { RouterLink, RouterView } from "vue-router";

const router = useRouter()
const toDemo = ()=>{
  router.push({path:'/demo'})
}
const toHello = ()=>{
  router.push({name:'hello'})
}


</script>

<template>
  <div id="d1">
    <div id="d2">
      <RouterLink to="/demo">去demo</RouterLink>
      <br>
      <RouterLink to="/hello">去hello</RouterLink>
      <br>
      <button @click="toDemo">去demo</button>
      <br>
      <button @click="toHello">去hello</button>
    </div>
    <div id="d3">
      <RouterView>
      </RouterView>
    </div>
  </div>
</template>

<style scoped>
h1{color:red}
#d1{display:flex}
#d2{width: 1000px;
  height:1000px;
  background-color: green;
  top:300px;
}
</style>
